const Block = ({
  title,
  action,
  isEdit,
  component,
  data,
  onAction,
  onSubmit,
  onCancel,
}) => {
  const Component = component
  return (
    <div className="border m-3 p-3">
      <div className="d-flex justify-content-between ">
        <h2>{title}</h2>
        {!isEdit && <button className="btn btn-link" onClick={onAction}>{action}</button>}
      </div>
      <div>
        <Component
          data={data}
          isEdit={isEdit}
          onEdit={onAction}
          onSubmit={onSubmit}
          onCancel={onCancel}
        />
      </div>
    </div>
  )
}

export default Block
